<template>
  <div class="video-player">
    <video 
      ref="videoRef"
      :src="videoUrl"
      class="player"
      controls
      autoplay
      @error="handleError"
    >
      您的浏览器不支持视频播放
    </video>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: {
      type: String,
      required: true
    }
  },
  setup() {
    const videoRef = ref(null);
    
    const handleError = (e) => {
      console.error('视频加载失败:', e);
    };
    
    return {
      videoRef,
      handleError
    };
  }
}
</script>

<style scoped>
.video-player {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.player {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none !important; /* 防止自动旋转 */
}
</style> 